<template>
	<view class="card">
		 <!-- v-if="have_nav" -->
		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);">
			<uni-nav-bar color="#333" left-icon="left" title="编辑" :border='false' :fixed="true" background-color="#FFF"
				@clickLeft="$native.backAction()"></uni-nav-bar>
		</view>
		 <!-- v-if="have_nav" -->
		<view class="nav_box"></view>


		<view class="tab flex_r_between" :id="have_nav ? 'have_nav' : ''">
			<!-- <view class="item" :id="tab == 1 ? 'select' : ''" @click="tab = 1">个人信息</view> -->
			<view class="item" :id="tab == 1 ? 'select' : ''" @click="tab = 1">交友</view>
			<view class="item" :id="tab == 2 ? 'select' : ''" @click="tab = 2">相亲</view>
			<view class="item" :id="tab == 3 ? 'select' : ''" @click="tab = 3">求职</view>
		</view>

		<friends ref="friends" v-show="tab == 1"></friends>
		<dating ref="dating" v-show="tab == 2"></dating>
		<job ref="job" v-show="tab == 3"></job>
	</view>
</template>

<script>
	import friends from './components/friends.vue';
	import dating from './components/dating.vue';
	import job from './components/job.vue';

	export default {

		components: {
			friends,
			dating,
			job
		},

		data() {
			return {
				tab: 1,

				have_nav: false,


			}
		},

		methods: {
			getAuthType() {
				this.$get('/category/getAuthType').then(res => {
					this.$refs.friends.authType = res.data;
					this.$refs.dating.authType = res.data;
					this.$refs.job.authType = res.data;
				})
			},

			getStoreType() {
				this.$get('/category/getStoreType').then(res => {
					this.$refs.job.storeType = res.data;
				})
			},

			// // 选择卡片
			// selectCircle(circle) {

			// 	if (this.tab == 1) {
			// 		this.$refs.friends.circle = circle;
			// 	}

			// 	if (this.tab == 2) {
			// 		this.$refs.dating.circle = circle;
			// 	}

			// 	if (this.tab == 3) {
			// 		this.$refs.job.circle = circle;
			// 	}

			// },

			// selectCommerce(action_type, action) {

			// 	if (this.tab == 1) {
			// 		this.$refs.friends.action = action;
			// 		this.$refs.friends.action_type = action_type;
			// 	}

			// 	if (this.tab == 2) {
			// 		this.$refs.dating.action = action;
			// 		this.$refs.dating.action_type = action_type;
			// 	}

			// 	if (this.tab == 3) {
			// 		this.$refs.job.action = action;
			// 		this.$refs.job.action_type = action_type;
			// 	}

			// },

			getDetail(id) {
				this.$get('/circle.circle_call_card/getDetail', {
					id: id
				}).then(res => {
					if (res.data.type == 1) {
						this.tab = 1;
						this.$refs.friends.getDetail(res.data);
					}

					if (res.data.type == 2) {
						this.tab = 2;
						this.$refs.dating.getDetail(res.data);
					}

					if (res.data.type == 3) {
						this.tab = 3;
						this.$refs.job.getDetail(res.data);
					}
				})
			},

			paySuccess() {
				if (this.tab == 1) {
					this.$refs.friends.paySuccess();
				}

				if (this.tab == 2) {
					this.$refs.dating.paySuccess();
				}

				if (this.tab == 3) {
					this.$refs.job.paySuccess();
				}
			},

			payFail() {
				if (this.tab == 1) {
					this.$refs.friends.payFail();
				}

				if (this.tab == 2) {
					this.$refs.dating.payFail();
				}

				if (this.tab == 3) {
					this.$refs.job.payFail();
				}
			},

			getUser() {
				this.$post('/user/info').then(res => {
					uni.setStorageSync('user', res.data);
					this.$refs.friends.user = res.data;
					this.$refs.dating.user = res.data;
					this.$refs.job.user = res.data;
				});
			},

		},

		onLoad(option) {

			// window.paySuccess = this.paySuccess;
			// window.payFail = this.payFail;


			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}

			if (option.circle) {
				this.$refs.friends.circle = JSON.parse(option.circle);
				this.$refs.friends.no_can = true;
			}

			this.getUser();

			// id 卡片id   need_pay 修改是否需要支付
			if (option.id) {
				this.$nextTick(() => {
					this.have_nav = true;
					this.getDetail(option.id);
				})
			}

			// 挂载原生交互
			// window.selectCommerce = this.selectCommerce;
			// window.selectCircle = this.selectCircle;

			this.getAuthType();
			this.getStoreType();

		},


	}
</script>

<style lang="less" scoped>
	.card {
		padding: 24rpx 32rpx 24rpx;
		min-height: 100vh;
		background: #F8F8F8;
	}

	#have_nav {
		top: calc(44px + var(--paging-head-top));
	}

	.tab {
		background: #F8F8F8;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;
		width: 100vw;
		padding: 24rpx 32rpx;

		.item {
			width: 215rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #E4E4E4;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			line-height: 60rpx;
			text-align: center;
			box-sizing: content-box;
		}

		#select {
			background: #FFF6F8;
			border: 2rpx solid #FFBBC8;
			color: #FD2A53;
		}
	}
</style>